<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>添加厂商</title>
    <style>
       /* .required{
            width: 250px;
        }*/
        .kong{
            width: 600px;
        }
    </style>
    <link type="text/css" rel="stylesheet" th:href="@{/static/qrcodes.css}" />
    <link rel="stylesheet" th:href="@{/static/table/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/jquery-upload/css/jquery.fileupload.css}">
    <link rel="stylesheet" th:href="@{/static/jquery-upload/css/jquery.fileupload-ui.css}">
    <script th:src="@{/static/jquery3.js}"></script>
    <script th:src="@{/static/jquery-form.js}"></script>

    <script th:src="@{/static/jquery-upload/js/vendor/jquery.ui.widget.js}"></script>
    <script th:src="@{/static/jquery-upload/js/jquery.iframe-transport.js}"></script>
    <script th:src="@{/static/jquery-upload/js/jquery.fileupload.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
            $("#factoryForm :input.required").each(function () {
                //通过jquery api：$("HTML字符串") 创建jquery对象
                var $required = $("<span><strong style='color:red;display:inline-block'>*</strong></span>");
                //添加到this对象的父级对象下
                $(this).parent().append($required);
            });

            $("#factoryFormSubmitButton").click(function () {
                var valid = true;
                $("#factoryForm :input.required").each(function () {
                    var val = $.trim($(this).val());
                    if (val.length == 0){
                        label = $(this).parent().prev().children().html();
                        alert(label+"不能为空！");
                        $(this).focus();
                        valid = false;
                        return false;
                    }
                });
                if(!valid) return false;

                var imgNum0 = $("#imgDiv0").find("img").length;
                var imgNum1 = $("#imgDiv1").find("img").length;

                factoryLogo = $("#factoryLogo").val();
                if(imgNum0 == 0){
                    alert("请上传厂家logo！");
                    valid = false;
                    return false;
                }

                if(imgNum1 == 0){
                    alert("请上传厂家图片！");
                    valid = false;
                    return false;
                }
                factoryPhone = $("#factoryPhone").val();
                if(!checkTel(factoryPhone)){
                    alert("电话格式不对");
                    valid = false;
                    return false;
                }
                if(valid){
                    $("#factoryForm").submit();
                }
            });


            $("#backButton").click(function(){
                window.location.href='[[${#request.getContextPath()}]]/factoryDevice/deviceIndex';
            })


            $('#factoryLogoTemp').fileupload({
                url: '[[${#request.getContextPath()}]]/factoryDevice/upload',
                messages : {//文件错误信息
                    maxNumberOfFiles:"超出最大上传文件数",
                    acceptFileTypes: '不允许的文件类型',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                },
                //上传完成之后的操作，显示在img里面
                done: function (e, data){
                    //$("#imgDiv2").empty();
                    $("#imgDiv0").append('<div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;"><img src="[[${#request.getContextPath()}]]/'+data.result.picAccessPath+'" style="width:137px;height:70px;margin-right:80px"/> ' +
                        '<button class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button></div>');
                    $("#imgDiv0").show();
                    var value= $("#factoryLogo").val();

                    var newValue = (value == null || value == "") ? "" +data.result.picPath : value+","+data.result.picPath;
                    $("#factoryLogo").val(newValue+"&" +data.result.width+"&" +data.result.height);
                    //$("#productImgDiv").append($("#productImg"))
                }
            });

            $('#factoryImgTemp').fileupload({
                url: '[[${#request.getContextPath()}]]/factoryDevice/upload',
                messages : {//文件错误信息
                    maxNumberOfFiles:"超出最大上传文件数",
                    acceptFileTypes: '不允许的文件类型',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                },
                //上传完成之后的操作，显示在img里面
                done: function (e, data){
                    //$("#imgDiv2").empty();
                    $("#imgDiv1").append('<div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;"><img src="[[${#request.getContextPath()}]]/'+data.result.picAccessPath+'" style="width:137px;height:70px;margin-right:80px"/> ' +
                        '<button class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button></div>');
                    $("#imgDiv1").show();
                    var value= $("#factoryImg").val();

                    var newValue = (value == null || value == "") ? "" +data.result.picPath : value+","+data.result.picPath;
                    $("#factoryImg").val(newValue+"&" +data.result.width+"&" +data.result.height);
                }
            });
        });

        function checkTel(tel) {
            //手机或固定电话
            var mobile = /^1[0-9]{10}$/, phone = /^(0\d{2,3}-)?\d{7,8}$/;
            return mobile.test(tel) || phone.test(tel);
        }

        function delPic(thiss){
            var picId = $(thiss).parent().find("img").eq(0).attr("value");
            if( picId ==undefined){

                var factoryImg=$("#factoryImg").val();
                var factoryLogo=$("#factoryLogo").val();

                var index = $(thiss).parent().find("img").eq(0).attr("src").indexOf('static');
                var url = $(thiss).parent().find("img").eq(0).attr("src").substring(index);

                var factoryImgs = factoryImg.split(",");
                var newFactoryImg= '';
                for(var i=0;i<factoryImgs.length;i++){
                    if(factoryImgs[i].indexOf(url) == -1){
                        newFactoryImg += factoryImgs[i] + ',';
                    }
                }

                var factoryLogos = factoryLogo.split(",");
                var newLogoId= '';
                for(var i=0;i<factoryLogos.length;i++){
                    if(factoryLogos[i].indexOf(url) == -1){
                        newLogoId += factoryLogos[i]+',';
                    }
                }


                $("#factoryImg").val(newFactoryImg);
                $("#factoryLogo").val(newLogoId);


                $(thiss).parent().remove();
            }else{
                $.post("[[${#request.getContextPath()}]]/product/deletePic?picId="+picId,function(data){
                    if(data == 1){
                        $(thiss).parent().remove();
                    }else{
                        alert("删除图片失败")
                    }
                })
            }
        }

    </script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data" method="post" style="display: none;">
</form>
<div class = "pg_header">
    <span class="pg_dl" id="i77" th:align="center">添加厂商</span>
</div>
<form th:action="@{/factoryDevice/insertOrUpdate}" method="post" id="factoryForm">
    <input type="hidden" th:if="${factory.factoryId} ne null" id="myProductId" name="factoryId" th:value="${factory.factoryId}"/>
    <!--<input type="hidden" id="factoryLogo" name="factoryLogo" th:value="${factory.factoryLogo}"/>-->
    <input type="hidden" id="factoryLogo" name="factoryLogo" />
    <input type="hidden" id="factoryImg" name="factoryImg"/>

    <div class="left"></div>
    <div class="pg_body">
        <div class="menu">
            <!--/*@thymesVar id="error" type=""*/-->
            <span id="basic-addon0">&nbsp;</span>
        </div>
        <div class="kong">

            <span style="font-size: 12px;color: red" th:text="${error}" aria-describedby="basic-addon0"></span>

            <br />
        </div>

        <div class="menu">
            <span id="basic-addon1">厂商名称</span>
        </div>
        <div class="kong">
            <input class="required" id="factoryName" name="factoryName" th:value="${factory.factoryName}" type="text" placeholder="厂商名称" aria-describedby="basic-addon1" />
        </div>
        <br />
        <div class="menu">
            <span id="basic-addon3">地址</span>
        </div>
        <div class="kong">
            <input class="required" id="factoryAddress" name="factoryAddress" th:value="${factory.factoryAddress}" type="text" placeholder="地址" aria-describedby="basic-addon3" />
        </div>
        <br />
        <div class="menu">
            <span id="basic-addon00">电话</span>
        </div>
        <div class="kong">
            <input id="factoryPhone" name="factoryPhone" th:value="${factory.factoryPhone}" type="text" placeholder="电话" aria-describedby="basic-addon3" />
        </div>
        <br />

        <div class="menu">
            <span id="basic-addon6">厂商logo</span>
        </div>
        <div class="kong">
            <div id="factoryLogoTempDiv">
                 <!--<input style="margin-bottom: 2%;" id="factoryLogoTemp" name="factoryLogoTemp" type="file" capture="camera" aria-describedby="basic-addon6" onchange="logoUpload()"/>-->
                <span class="btn btn-success fileinput-button" style="color: #fff;background-color: #5cb85c;border-color: #4cae4c;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input  style="margin-bottom: 2%;" id="factoryLogoTemp" name="factoryLogoTemp"  type="file" capture="camera" aria-describedby="basic-addon4" />
                 </span>
            </div>

        <div th:if="${factory.factoryId} eq null" id="imgDiv0" style="display: none;"></div>

        <div th:if="${factory.factoryId} ne null" id="imgDiv0" style="display: block;">
            <div th:each="prod : ${factory.logoList}">
                <div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;">
                    <img th:src="${#request.getContextPath()+'/'+staticAccessPath}+${prod.picUrl}" style="width:137px;height:70px;margin-right:80px" th:value="${prod.picId}"/>
                    <!--<button type="button" class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button>-->
                    <button type="button" onclick="delPic(this)" class="btn btn-warning cancel" > <i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span> </button>
                </div>
            </div>
        </div>
        </div>
        <br />

        <div class="menu">
            <span id="basic-addon4">厂商图片</span>
        </div>
        <div class="kong">
            <div id="factoryImgDiv">
             <span class="btn btn-success fileinput-button" style="color: #fff;background-color: #5cb85c;border-color: #4cae4c;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input  style="margin-bottom: 2%;" id="factoryImgTemp" name="factoryImgTemp"  type="file" capture="camera" aria-describedby="basic-addon4" />
             </span>
            </div>
            <!--<button type="button" id="productImgBtn" style="width:100px;border-radius:6px;border-width:1px;border-style:solid;border-color:#0b6cbc;">上传</button>-->
            <div th:if="${factory.factoryId} eq null" id="imgDiv1" style="display: none;"></div>

            <div th:if="${factory.factoryId} ne null" id="imgDiv1" style="display: block;">
                <div th:each="prod : ${factory.imgList}">
                    <div style="margin-top: 20px;border:1px solid #5a44593d;width: 70%;">
                        <img th:src="${#request.getContextPath()+'/'+staticAccessPath}+${prod.picUrl}" style="width:137px;height:70px;margin-right:80px" th:value="${prod.picId}"/>
                        <!--<button type="button" class="btn btn-warning cancel" onclick="delPic(this)"> <i class="glyphicon glyphicon-ban-circle"></i><span>取消</span> </button>-->
                        <button type="button" onclick="delPic(this)" class="btn btn-warning cancel" > <i class="glyphicon glyphicon-ban-circle"></i> <span>取消</span> </button>
                    </div>
                </div>
            </div>

        </div>


        <div class="menu">
            <span id="basic-addon7">宣传标语</span>
        </div>
        <div class="kong">
            <textarea id="factorySlogan" name="factorySlogan" rows="5" cols="22" type="textarea" placeholder="宣传标语" aria-describedby="basic-addon5" th:text="${factory.factorySlogan}"></textarea>
        </div>

        <br />
        <div class="menu">
            <span id="basic-addon8">厂家介绍</span>
        </div>
        <div class="kong">
            <textarea id="factoryIntroduce" name="factoryIntroduce" rows="5" cols="22" type="textarea" placeholder="厂家介绍" aria-describedby="basic-addon5" th:text="${factory.factoryIntroduce}"></textarea>
        </div>
        <br />
        <div class="menu"></div>
        <div class="kong">
        <button class="btn btn-primary" th:if="${factory.factoryId} eq null" type="button" id="factoryFormSubmitButton" >添 加</button>
        <button class="btn btn-primary" th:if="${factory.factoryId} ne null" type="button" id="factoryFormSubmitButton" >修 改</button>
        <button class="btn btn-default" type="button" id="backButton" >返回</button>
        </div>
    </div>
</form>

</body>
</html>